<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .comp-a,
        .comp-b,
        .comp-c {
            line-height: 40px;
            padding: 10px;
            margin: 10px auto;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <!-- 根组件 -->
    <div id="app">
        <p>
            <button @click="compName='LaowangA'">组件A</button>
            <button @click="compName='LaowangB'">组件B</button>
            <button @click="compName='LaowangC'">组件C</button>
        </p>

        <!-- component 动态组件 官方内置组件(全局组件)  => 对应组件名称渲染某个组件 -->
        <!--
            keep-alive 组件缓存 官方内置组件(全局组件) => 默认缓存组件内的数据
                1.  keep-alive默认会被缓存, 组件切换时不会触发 销毁阶段  beforeDestroy  destroyed
                2.  于此同时,被keep-alive包裹的组件新增两个生命周期钩子 activated和 deactivated
                        activated(组件激活时触发  => 其他组件切换到当前组件, 当前组件激活,切换前的组件失活) 
                        deactivated(组件失活时触发) => 当前组件 切换到 其他组件, 当前组件失活, 其他组件激活
            
            -->
        <keep-alive >
            <component :is="compName"></component>
        </keep-alive>
    </div>
</body>
<script>

    let LaowangA = {
        data(){
            return {
                count:1
            }
        },
        template: `<div class="comp-a">
                    这是A组件:{{count}}
                    <p><button @click="count++">count++</button></p>
                </div>`,
        mounted(){
            console.log("组件A挂载");
        },
        destroyed () {
            console.log("组件A销毁");
        },
        activated () {
            console.log("组件A 激活");
        },
        deactivated () {
            console.log("组件A 失活");
        }
        
    }

    let LaowangB = {
        data(){
            return {
                count:1,
                timer:null,
            }
        },
        template: `<div class="comp-b">
                    这是B组件:{{count}}
                </div>`,
        methods:{
            start(){
                clearInterval(this.timer);
                this.timer = setInterval(()=>{
                    this.count++
                },1000)
            },
            stop(){
                clearInterval(this.timer);
            }
        },
        mounted () {
            this.start();  
            console.log("组件B挂载");
        },
        beforeDestroy () {
            this.stop();
        },
        destroyed () {
            console.log("组件B销毁");
        },
        activated () {
            this.start();  
            console.log("组件B 激活");
        },
        deactivated () {
            this.stop();
            console.log("组件B 失活");
        }
    }

    let LaowangC = {
        data(){
            return {
                isFirst:false,
            }
        },
        template: `<div class="comp-c">
                    这是C组件:
                </div>`,
        mounted(){
            console.log("组件C挂载",this.isFirst);
        },
        destroyed () {
            console.log("组件C销毁");
        },
        activated () {
            console.log("组件C 激活");

            if(this.isFirst){
                console.log("再次进入是才会执行");
            }
            this.isFirst = true;

        },
        deactivated () {
            console.log("组件C 失活");
        }
    }

    

    // 根组件 => 挂载到页面最外层中 (所有组件,都是根组件的子组件)
    var vm = new Vue({
        el: "#app",
        data: {
            compName:"LaowangA",
        },
        methods: {
            update: function (val) { // this => vm
                this.count = val;
            }
        },
        components: {
            // components 局部组件注册 (使用时才会被注册)
            // 对象的键名: 就是局部组件的组件名
            // 对象的键值: 局部组件的配置项 
            LaowangA,
            LaowangB,
            LaowangC,
        },
        provide: {

        }
    })



</script>

</html>